<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>webuploader</title>

  <script src="http://cdn.bootcss.com/jquery/3.1.0/jquery.min.js"></script>

  <link rel="stylesheet" type="text/css" href="./webuploader.css">
  <script type="text/javascript" src="./webuploader.min.js"></script>
  <script>

    var uploader = WebUploader.create({
      // swf文件路径
      // swf: './Uploader.swf',

      // 文件接收服务端
      server: 'http://localhost:8080/file/upload',

      // 选择文件的按钮。可选。内部根据当前运行是创建，可能是input元素，也可能是flash
      // pick: '#picker',

      // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传
      resize: false
    });

    uploader.on('fileQueued', function (file) {
      $('#thelist').append('<div id="' + file.id + '" class="item">' +
          '<h4 class="info">' + file.name + '</h4>' +
          '<p class="state">等待上传...</p>' +
          '</div>');
    });

    uploader.on('uploadProgress', function (file, percentage) {

      console.log(file, percentage)

      var $li = $('#' + file.id),
          $percent = $li.find('.progress .progress-bar');

      // 避免重复创建
      if (!$percent.length) {
        $percent = $('<div class="progress progress-striped active">' +
            '<div class="progress-bar" role="progressbar" style="width: 0%"></div>' +
            '</div>').appendTo($li).find('.progress-bar');
      }

      $li.find('p.state').text('上传中');

      $percent.css('width', percentage * 100 + '%');
    });

    uploader.on('uploadSuccess', function (file) {
      $('#' + file.id).find('p.state').text('已上传');
    });

    uploader.on('uploadError', function (file) {
      $('#' + file.id).find('p.state').text('上传出错');
    });

    uploader.on('uploadComplete', function (file) {
      $('#' + file.id).find('.progress').fadeOut();
    });


    function upload() {
      console.log($('#file')[0].files)
      uploader.addFiles($('#file')[0].files)
      uploader.upload()
    }
  </script>

</head>
<body>
<input type="file" name="file" id="file" multiple="multiple">
<button id="ctlBtn" class="btn btn-default" onclick="upload()">开始上传</button>
<!--用来存放文件信息-->
<div id="thelist" class="uploader-list"></div>
</body>
</html>